<template>
	<div class="video">
		<div
			v-for="(item, index) in data"
			class="item"
			@click="handleClick(item)"
			@mouseenter="mouseenterFn(index, $event)"
		>
			<video :src="item.src" muted></video>
			<span v-show="index == active" @mouseleave="mouseleaveFn"> </span>
		</div>
	</div>
</template>

<script setup>
import { reactive, ref } from "vue";
import img1 from "@/assets/1.mp4";
import img2 from "@/assets/2.mp4";
import img3 from "@/assets/3.mp4";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { setQuery } from "../utils/index.js";	

const store = useStore();
const router = useRouter();

const active = ref();
const data = reactive([
	{
		src: img1,
	},
	{
		src: img2,
	},
	{
		src: img3,
	},
]);

const handleClick = (item) => {
	setQuery(item);
	router.push("/show");
};

const mouseenterFn = (index, e) => {
	active.value = index;
	e.target.firstChild.play();
};

const mouseleaveFn = (e) => {
	e.target.previousSibling.currentTime = 0;
	e.target.previousSibling.pause();
};
</script>
<style scoped lang="scss">
.video {
	display: flex;
	// width: 100px;
	.item {
		position: relative;
		border-radius: 10px;
		overflow: hidden;
		width: 400px;
		height: 200px;
		box-sizing: border-box;
		cursor: pointer;
		margin: 20px;
		video {
			width: 400px;
			height: 200px;
			box-sizing: border-box;
			border-radius: 10px;
			background-color: black;
			z-index: 200;
		}
		span {
			position: absolute;
			left: 0;
			top: 0;
			width: 600px;
			height: 400px;
			background-color: rgba($color: #000000, $alpha: 0.3);
			// &::after {
			// 	content: "";
			// 	width: 0;
			// 	height: 0;
			// 	border: 50px solid transparent;
			// 	border-right-color: rgb(244, 234, 234);
			// 	position: absolute;
			// 	left: 50%;
			// 	display: block;
			// 	top: 50%;
			// 	
			// 	transform: scale(0.8) translateY(-50%) translateX(-50%);
			// }
			// &::before {
			// 	content: "";
			// 	width: 120px;
			// 	height: 120px;
			// 	border: 4px solid white;
			// 	position: absolute;
			// 	border-radius: 50%;
			// 	left: 50%;
			// 	top: 50%;
			// 	display:  inline-block;
			// 	transform: translateY(-50%) translateX(-50%)
			// }
		}
	}
}
</style>
